<template>
  <dl class="sea-steps">
    <dd v-for="(item, idx) in opts" :key="idx" class="sea-steps-item" @click="handlerStepChange(idx)">
      <strong :class="item.color"> <i :class="item.icon"></i> {{ item.label }} </strong>
      <span class="sea-steps-separator">{{ separator }}</span>
    </dd>
  </dl>
</template>

<script>
import Layers from "@/lang/layers";
import Item from "./item";

/**
 * 步骤条
 *
 * 极简步骤条，相比于 el-steps，设计更加简单，拥有更多的操作函数，更容易嵌套在系统的界面中。
 * 不与 el-steps 代码冲突，需要复杂步骤条的场景，仍然可以使用。
 *
 * 代码设计上，与 sea-breadcrumb 一致，代码比当前组件更加简单。
 */
export default {
    name: "SeaSteps"
    , props: {
        // 步骤属性值，对应 options 的 value
        value: {type: [Number, String], default: undefined},
        // 步骤序号，对应 options 的 index
        step: {type: Number, default: undefined},
        // 数据列表
        options: {type: Array, default: undefined},

        // 步骤完成事件
        onFinish: {type: Function, default: undefined},

        // 分隔符
        separator: {type: String, default: '>'},

        // 默认：作业中图标
        workingIcon: {type: String, default: 'fa fa-fw fa-edit'},
        // 默认：已完成图标
        activeIcon: {type: String, default: 'fa fa-fw fa-check-circle-o'},
        // 默认：未完成图标
        inactiveIcon: {type: String, default: 'fa fa-fw fa-circle-thin'},
        // 默认：作业中色值
        workingColor: {type: String, default: 'text-green'},
        // 默认：已完成色值
        activeColor: {type: String, default: 'text-primary'},
        // 默认：未完成色值
        inactiveColor: {type: String, default: 'text-fatal'}
    }, watch: {
        options: {
            handler: function (arr) {
                this.setOptions(arr);
                this.handlerStepChange(this.step_);
            }
        }
        , value: {
            handler: function (val) {
                this.handlerValueChange(val);
            }
        }
        , step: {
            handler: function (val) {
                this.handlerStepChange(val);
            }
        }
    },
    data() {
        return {
            // 可选步骤列表
            opts: []
            // 当前步骤，算法上用的是 index 值
            , step_: undefined
        }
    },
    created() {
        // 渲染
        if (Layers.isNotBlank(this.options)) {
            this.setOptions(this.options);
        }

        // 初始化步骤位置信息
        if (Layers.isNotBlank(this.step)) {
            this.handlerStepChange(this.step);
        } else if (Layers.isNotBlank(this.value)) {
            this.setValue(this.value);
        }
    },
    methods: {
        /**
         * 设置步骤条参数
         */
        setOptions: function (options) {
            let ret = [];
            if (Layers.isNotBlank(options)) {
                for (let i = 0; i < options.length; i++) {
                    ret.push(new Item(options[i], this, i));
                }
            }
            this.opts = ret;
        }
        /**
         *设置属性值
         *
         * @param value 属性值
         */
        , handlerValueChange: function (value) {
            let arr = this.opts;
            for (let i = 0; i < arr.length; i++) {
                if (value === arr[i].value) {
                    this.handlerStepChange(i);
                    break;
                }
            }
        }
        /**
         * 步骤条点击事件
         *
         * @param idx 序号
         */
        , handlerStepChange: function (idx) {
            if (this.step_ !== idx) {
                this.step_ = idx;

                // 切换每个 item 的样式
                let arr = this.opts;
                for (let i = 0; i < arr.length; i++) {
                    arr[i].compare(this.step_);
                }

                console.log(this.opts[idx - 1]);

                // 触发 change 事件
                let item = this.opts[idx];
                this.$emit('change', {item, idx});
            }
        }
        /**
         * 跳转下一个步骤
         */
        , next: function () {
            if (this.step_ < this.opts.length) {
                let next = this.step_ + 1;
                if (next < this.opts.length) {
                    this.handlerStepChange(next)
                } else {
                    this.finish();
                }
            }
        }
        /**
         * 跳转前一个步骤
         */
        , previous: function () {
            if (this.step_ > 0) {
                let next = this.step_ - 1;
                this.handlerStepChange(next);
            }
        }
        /**
         * 跳转最后一个步骤
         */
        , finally: function () {
            this.handlerStepChange(this.opts.length - 1);
        }
        /**
         * 跳转第一个步骤
         */
        , first: function () {
            this.handlerStepChange(0);
        }
        /**
         * 完成全部，直接结束
         *
         * 注意这时候的step值
         */
        , finish: function () {
            this.step_ = this.opts.length;
            Layers.executeMethod(this.onFinish);
        }
    }
}
</script>
